﻿<template>
  <el-dialog v-drag :title = 'dialogObj.dialogTitle' :visible.sync = 'dialogObj.dialogFormVisible' width = '95%'
  class = 'main_dialog settingsDialog md_dialog' :close-on-click-modal = "false" :close-on-press-escape = "false" @close = "resetForm">
    <div id = 'dynamic_container'>
      <!-- 左边展示可以拉选的组件列表 -->
      <div id = 'item_pannel'>
        <el-collapse accordion class = 'myCollapse'>
          <el-collapse-item title = '布局元素'>
            <draggable tag = 'ul' :list = 'layoutComponents' v-bind = "{group:{ name:'people', pull:'clone', put:false}, sort:false}">
              <li :class = "item.type === 'grid' ? 'data-grid': 'tabs-grid'" v-for = '(item, index) in layoutComponents' :key = 'index'>
                <i class = 'iconfont ' :class = 'item.icon'></i>
                <span>{{item.name}}</span>
              </li>
            </draggable>
          </el-collapse-item>
          <!-- 只在设置模板时显示 -->
          <el-collapse-item title = '表单元素' v-if = "propsInfo && propsInfo.settingFrom === 'templateSetting'">
            <draggable tag = 'ul' :list = 'formComponents' v-bind = "{group:{ name:'people', pull:'clone', put:false}, sort:false}">
              <li v-for = '(item, index) in formComponents' :key = 'index'>
                <i class = 'iconfont ' :class = 'item.icon'></i>
                <span>{{item.name}}</span>
              </li>
            </draggable>
          </el-collapse-item>
          <el-collapse-item title = '其它元素'>
            <draggable tag = 'ul' :list = 'otherComponents' v-bind = "{group:{ name:'people', pull:'clone', put:false}, sort:false}">
              <li v-for = '(item, index) in otherComponents' :key = 'index'>
                <i class = 'iconfont ' :class = 'item.icon'></i>
                <span>{{item.name}}</span>
              </li>
            </draggable>
          </el-collapse-item>
          <el-collapse-item title = '元数据' v-if = "propsInfo && propsInfo.settingFrom !== 'templateSetting'">
            <div>
              <p style = 'width: 100%;font-size: 14px; line-height: 28px;'>当前元数据表：</p>
              <el-select v-model = "currentSelectedMetaTable" placeholder = "请选择需要的元数据表" clearable filterable @change = 'selectedMetaTableChanged'>
                <el-option-group v-for = 'group in allMetaTable' :key = 'group.category_no' :label = 'group.category_name'>
                  <el-option v-for = 'item in group.tables' :key = 'item.metauid' :value = 'item.metauid' :label = "item.metadesc ? item.metadesc + '(' + item.metaname + ')' : item.metaname"></el-option>
                </el-option-group>
              </el-select>
            </div>
            <draggable tag = 'ul' :list = 'showMetaList' v-bind = "{group:{ name:'people', pull:'clone', put:false}, sort:false}">
              <li v-for = '(item, index) in showMetaList' :key = 'index' :title = 'item.name'>
                <i class = 'iconfont ' :class = 'item.icon'></i>
                <span>{{item.name}}</span>
              </li>
            </draggable>
            <p style = 'width: 100%;font-size: 14px; line-height: 28px;'>当前元数据表的虚拟栏位：</p>
            <draggable tag = 'ul' :list = 'showVirMetaList' v-bind = "{group:{ name:'people', pull:'clone', put:false}, sort:false}">
              <li v-for = '(item, index) in showVirMetaList' :key = 'index' :title = 'item.name'>
                <i class = 'iconfont ' :class = 'item.icon'></i>
                <span>{{item.name}}</span>
              </li>
            </draggable>
          </el-collapse-item>
          <el-collapse-item  title = '可编辑表格' v-if = "propsInfo && propsInfo.settingFrom !== 'templateSetting'">
            <draggable tag = 'ul' :list = 'showRelMetaTableList' v-bind = "{group:{ name:'people', pull:'clone', put:false}, sort:false}">
              <li v-for = '(item, index) in showRelMetaTableList' :key = 'index' :title = 'item.name'>
                <i class = 'iconfont ' :class = 'item.icon'></i>
                <span>{{item.name}}</span>
              </li>
            </draggable>
          </el-collapse-item>
        </el-collapse>
      </div>
      <!-- 右侧展示的是配置的信息 -->
      <div id = 'detail_pannel' ref = 'detail_pannel'>
        <el-tabs v-model = 'currentTab' stretch>
          <el-tab-pane label = '模板/页面属性' name = 'currentPage'>
            <Meta-Page-config :pageConfig = 'formData.pageConfig'></Meta-Page-config>
          </el-tab-pane>
          <!-- 只有当动态表单需要配置流程时才会显示 -->
          <el-tab-pane label = '页面流程' name = 'currentWorkflow' v-if = "propsInfo && propsInfo.settingFrom === 'workflowSetting'">
            <Workflow-Config :currentPage = 'formData.pageConfig' :showEditContentDialog = 'propsInfo.settingVisible' from = 'metaPage'></Workflow-Config>
          </el-tab-pane>
          <el-tab-pane label = '页面事件' name = 'currentPageEventsConfig' v-if = "propsInfo && propsInfo.settingFrom !== 'templateSetting'">
            <Meta-Page-Events-Config :currentPage = 'formData.pageConfig' :allSingleModel = 'allSingleModel' :propsInfo = 'propsInfo'></Meta-Page-Events-Config>
          </el-tab-pane>
          <el-tab-pane label = '模板固有事件' name = 'currentTemplateEventsConfig' v-if = "propsInfo && propsInfo.settingFrom === 'templateSetting'">
            <Meta-Page-Inherent-Events-Config :currentPage = 'formData.pageConfig' :allSingleModel = 'allSingleModel'></Meta-Page-Inherent-Events-Config>
          </el-tab-pane>
          <el-tab-pane label = '当前元素' name = 'currentFormItem'>
            <Meta-Form-Item-Config :formItemConfig = 'selectFormItem' :formDataList = 'allSingleModel' :propsInfo = 'propsInfo'
            :currentSelectedMetaTable = 'currentSelectedMetaTable' :allMetaTable = 'allMetaTable' :subOptions = 'showRelMetaTableList'></Meta-Form-Item-Config>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 中间是主要的内容部分 -->
      <div id = 'main_pannel' ref = 'main_pannel'>
        <div class = 'main_buttonContent'>
          <el-button type = 'info' size = 'mini' icon = ''  @click = 'resetForm'>取消</el-button>
          <el-button type = 'primary' size = 'mini' @click = 'submitForm'>确定</el-button>
          <el-button type = 'primary' size = 'mini' @click = 'previewForm'>预览</el-button>
        </div>
        <Meta-Form-Layout :data = "formData" :select.sync = "selectFormItem"></Meta-Form-Layout>
      </div>
      <!-- 展示的弹窗 -->
      <el-dialog v-drag :title = 'previewTitle' :visible.sync = 'previewFormVisible' width='95%' class='main_dialog md_dialog' append-to-body>
        <Show-Meta-Form-Layout v-if = "propsInfo && propsInfo.settingVisible && propsInfo.settingFrom !== 'workflowSetting'" :data = "formData"></Show-Meta-Form-Layout>
        <Show-Workflow-Form-Layout v-if = "propsInfo && propsInfo.settingVisible && propsInfo.settingFrom === 'workflowSetting'" :data = "formData"></Show-Workflow-Form-Layout>
      </el-dialog>
    </div>
  </el-dialog>
</template>

<script>
// 页面基础组件的配置文件
import { formComponents, layoutComponents, otherComponents, metaUiComponents } from './componentsData.js'
// 可拖拽的插件
import draggable from 'vuedraggable'
// 页面的主要布局配置组件
import MetaFormLayout from './MetaFormLayout.vue'
// 右侧部分--页面/模板的属性
import MetaPageConfig from './MetaPageConfig.vue'
// 右侧部分--模板事件(为固有事件，不需要额外的绑定事件)
import MetaPageInherentEventsConfig from './MetaPageInherentEventsConfig.vue'
// 右侧部分--页面事件
import MetaPageEventsConfig from './MetaPageEventsConfig.vue'
// 右侧部分--当前元素
import MetaFormItemConfig from './MetaFormItemConfig.vue'
// 查看动态表单的页面
import ShowMetaFormLayout from './ShowMetaFormLayout.vue'
// 流程页面关联流程的页面
import WorkflowConfig from '@/components/WorkflowConfig.vue'
// 查看流程表单的页面
import ShowWorkflowFormLayout from '@/components/DynamicFormComponents/ShowWorkflowFormLayout.vue'
export default {
  // 父组件传过来的变量-包括settingVisible、settingFrom、settings、uid（当前页面或者模板的id）等基础信息
  // settingFrom包括三方面的内容
  // 1.模板定义时(templateSetting) 2.普通页面定义时(dynamicSetting)  3.流程页面定义时(workflowSetting)
  props: {
    propsInfo: Object
  },
  data () {
    return {
      // 弹窗的基本变量
      dialogObj: {
        dialogTitle: '',
        dialogFormVisible: false
      },
      // 基础组件的配置变量
      formComponents,
      layoutComponents,
      otherComponents,
      // 元数据的字段ui_type对应的UI组件
      metaUiComponents,
      // 页面配置的变量
      formData: {
        // 页面组件的组成
        list: [],
        // 页面的相关配置
        pageConfig: {
          // 页面/模板名称
          name: '',
          // 页面模板大小(带弹窗时)
          width: 50,
          // 表单前label的宽度
          labelWidth: 100,
          // 表单前label的对齐方式
          labelPosition: 'right',
          // 页面事件--自定义事件
          events: [],
          // 页面固有的事件（不需要绑定事件，仅仅是判断当前页面有哪些固定的事件）
          inherentEvents: [],
          // 是否配置流程
          hadWorkflow: false,
          // 关联的流程WFID
          relatedWorkflow: '',
          // 关联的流程的code
          relatedWorkflowCode: '',
          // 关联的流程的名称
          relatedWorkflowName: '',
          // 关联的流程的节点
          relatedWorkflowNode: '',
          // 流程相关的事件
          workflowBtnEvents: [],
          // 关联的元数据表的uid
          refMainMetaTableUid: ''
        }
      },
      // 选中的元素
      selectFormItem: null,
      // 右侧表示当前选中的tab
      currentTab: 'currentPage',
      // 所有的单个元素
      allSingleModel: [],
      previewTitle: '页面设置效果预览',
      previewFormVisible: false,
      // 所有的元数据表--分类的列表
      allMetaTable: [],
      // 当前选中的元数据表
      currentSelectedMetaTable: '',
      // 左侧展示元数据的字段信息
      showMetaList: [],
      // 左侧展示元数据的虚拟字段信息
      showVirMetaList: [],
      // 左侧展示的选中的元数据表的关联的从表
      showRelMetaTableList: []
    }
  },
  methods: {
    // 弹窗打开时
    dialogHadOpen () {
      if (this.propsInfo.settings) {
        this.formData = JSON.parse(this.propsInfo.settings)
        if (this.formData.list.length) {
          this.selectFormItem = this.formData.list[0]
        } else {
          this.selectFormItem = null
        }
      } else {
        this.formData = {
          // 页面组件的组成
          list: [],
          // 页面的相关配置
          pageConfig: {
            // 页面/模板名称
            name: '',
            // 页面模板大小(带弹窗时)
            width: 50,
            // 表单前label的宽度
            labelWidth: 100,
            // 表单前label的对齐方式
            labelPosition: 'left',
            // 页面事件--自定义事件
            events: [],
            // 页面固有的事件（不需要绑定事件，仅仅是判断当前页面有哪些固定的事件）
            inherentEvents: [],
            // 是否配置流程
            hadWorkflow: false,
            // 关联的流程WFID
            relatedWorkflow: '',
            // 关联的流程的code
            relatedWorkflowCode: '',
            // 关联的流程的名称
            relatedWorkflowName: '',
            // 关联的流程的节点
            relatedWorkflowNode: '',
            // 流程相关的事件
            workflowBtnEvents: [],
            // 关联的元数据表的uid
            refMainMetaTableUid: ''
          }
        }
      }
      // 当前页面或者模板的名称
      this.formData.pageConfig.name = this.propsInfo.name
      this.dialogObj.dialogTitle = this.propsInfo.name + '--页面/模板配置设定'
      // 清空展示元数据表栏位的列表
      this.showMetaList = []
      this.showVirMetaList = []
      // 清空展示的选中的元数据表的关联的从表
      this.showRelMetaTableList = []
      // 当前选中的元数据表
      this.currentSelectedMetaTable = this.formData.pageConfig.refMainMetaTableUid
      // 获取所有的元数据表，并进行分类
      this.getAllMetaTable()
    },
    // 点击确定时
    submitForm () {
      let obj = {
        jsonData: JSON.stringify(this.formData)
      }
      this.$emit('sureSetting', obj)
    },
    // 关闭弹窗的方法
    resetForm () {
      this.$emit('giveUpSetting')
    },
    // 获取所有的单个元素
    getAllSingleModel (itemList) {
      this.allSingleModel = []
      if (itemList.length) {
        itemList.forEach((item, index) => {
          if (item.type === 'grid') {
            if (item.columns.length) {
              for (let i = 0; i < item.columns.length; i++) {
                for (let n = 0; n < item.columns[i].list.length; n++) {
                  this.allSingleModel.push(item.columns[i].list[n])
                  // 数字模式的输入框时，需要避免最大和最小值
                  if (item.columns[i].list[n].type === 'IntInput' || item.columns[i].list[n].type === 'DecimalInput' || item.columns[i].list[n].type === 'Money') {
                    if (item.columns[i].list[n].options.min === null) {
                      this.$set(this.formData.list[index].columns[i].list[n].options, 'min', -Infinity)
                    }
                    if (item.columns[i].list[n].options.max === null) {
                      this.$set(this.formData.list[index].columns[i].list[n].options, 'max', Infinity)
                    }
                  }
                }
              }
            }
          } else if (item.type === 'tabs') {
            if (item.tabList.length) {
              for (let i = 0; i < item.tabList.length; i++) {
                for (let n = 0; n < item.tabList[i].list.length; n++) {
                  if (item.tabList[i].list[n].type === 'grid') {
                    const tabGrid = item.tabList[i].list[n]
                    if (tabGrid.columns.length) {
                      for (let it = 0; it < tabGrid.columns.length; it++) {
                        for (let nt = 0; nt < tabGrid.columns[it].list.length; nt++) {
                          this.allSingleModel.push(tabGrid.columns[it].list[nt])
                          if (tabGrid.columns[it].list[nt].type === 'IntInput' || tabGrid.columns[it].list[nt].type === 'DecimalInput' || tabGrid.columns[it].list[nt].type === 'Money') {
                            if (tabGrid.columns[it].list[nt].options.min === null) {
                              this.$set(this.formData.list[index].tabList[i].list[n].columns[it].list[nt].options, 'min', -Infinity)
                            }
                            if (tabGrid.columns[it].list[nt].options.max === null) {
                              this.$set(this.formData.list[index].tabList[i].list[n].columns[it].list[nt].options, 'max', Infinity)
                            }
                          }
                        }
                      }
                    }
                  } else {
                    this.allSingleModel.push(item.tabList[i].list[n])
                    if (item.tabList[i].list[n].type === 'IntInput' || item.tabList[i].list[n].type === 'DecimalInput' || item.tabList[i].list[n].type === 'Money') {
                      if (item.tabList[i].list[n].options.min === null) {
                        this.$set(this.formData.list[index].tabList[i].list[n].options, 'min', -Infinity)
                      }
                      if (item.tabList[i].list[n].options.max === null) {
                        this.$set(this.formData.list[index].tabList[i].list[n].options, 'max', Infinity)
                      }
                    }
                  }
                }
              }
            }
          } else {
            this.allSingleModel.push(item)
            if (item.type === 'IntInput' || item.type === 'DecimalInput' || item.type === 'Money') {
              if (item.options.min === null) {
                this.$set(this.formData.list[index].options, 'min', -Infinity)
              }
              if (item.options.max === null) {
                this.$set(this.formData.list[index].options, 'max', Infinity)
              }
            }
          }
        })
      }
    },
    // 点击预览时
    previewForm () {
      this.previewTitle = this.propsInfo.name + '预览'
      this.previewFormVisible = true
    },
    // 获取所有的元数据表
    getAllMetaTable () {
      this.allMetaTable = []
      this.$get('/metadata', {
        inc_fc: this.propsInfo.showFixedColumn === '1'
      }).then(data => {
        let dataResult = data.data.result
        for (let i = 0; i < dataResult.length; i++) {
          this.addMetaTableToSameCategory(dataResult[i])
        }
        // 当有选中的元数据表时
        if (this.currentSelectedMetaTable) {
          this.getSelectedMetaTableColumns(this.currentSelectedMetaTable)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 将相同的类别的元数据表放到一起
    addMetaTableToSameCategory (currentTable) {
      let hadPushed = false
      if (this.allMetaTable.length) {
        for (let i = 0; i < this.allMetaTable.length; i++) {
          // 如果有同类型的元数据表
          if (currentTable.category_no === this.allMetaTable[i].category_no) {
            this.$set(this.allMetaTable[i].tables, this.allMetaTable[i].tables.length, currentTable)
            hadPushed = true
            break
          }
        }
      }
      // 当没有同类型的元数据表时
      if (!hadPushed || !this.allMetaTable.length) {
        let obj = {
          category_name: currentTable.category_name,
          category_no: currentTable.category_no,
          tables: []
        }
        obj.tables.push(currentTable)
        this.$set(this.allMetaTable, this.allMetaTable.length, obj)
      }
    },
    // 选中的元数据表改变时
    selectedMetaTableChanged (val) {
      // 当已有元素表
      if (this.formData.pageConfig.refMainMetaTableUid) {
        if (val !== this.formData.pageConfig.refMainMetaTableUid) {
          // 改变了元数据表时
          this.$confirm('确定要更换元数据表么，更换元数据表后需要删除之前元数据表的组件，避免出错', '提示', {
            confirmButtonText: '确定',
            cancelButtonClass: 'el-button--info',
            cancelButtonText: '取消'
          }).then(() => {
            this.formData.pageConfig.refMainMetaTableUid = val
            this.getSelectedMetaTableColumns(val)
          }).catch(() => {
            this.currentSelectedMetaTable = this.formData.pageConfig.refMainMetaTableUid
          })
        }
      } else {
        // 没有元数据表时，直接将选中的元数据表赋予页面
        this.formData.pageConfig.refMainMetaTableUid = val
        this.getSelectedMetaTableColumns(val)
      }
    },
    // 获取虚拟栏位信息
    getVirtualInfo (metauid, metaname) {
      this.$get('/metadata/' + metauid + '/virsual_columns').then(data => {
        this.getColumnsInfoBySelectedMetaTableColumnsOne(data.data.result, metauid, metaname)
      }).catch(error => {
        console.log(error)
      })
    },
    // 获取选中的元数据表的字段信息
    getSelectedMetaTableColumns (selectedMetaUid) {
      // 清空选中的元数据表的从表
      this.showRelMetaTableList = []
      // 对所有的元数据表进行循环，找到main_ref为选中表的元数据表即为选中表的从表
      for (let i = 0; i < this.allMetaTable.length; i++) {
        for (let t = 0; t < this.allMetaTable[i].tables.length; t++) {
          // 找到选中的元素数据表，获取选中的元数据表的栏位信息
          if (this.allMetaTable[i].tables[t].metauid === selectedMetaUid) {
            let metaname = this.allMetaTable[i].tables[t].metadesc ? (this.allMetaTable[i].tables[t].metadesc + '(' + this.allMetaTable[i].tables[t].metaname + ')') : this.allMetaTable[i].tables[t].metaname
            this.getColumnsInfoBySelectedMetaTableColumns(this.allMetaTable[i].tables[t].columns, this.allMetaTable[i].tables[t].metauid, metaname)
            this.getVirtualInfo(selectedMetaUid, metaname)
          }
          // 找到选中表的所有从表，可以作为可编辑表格的选项
          if (this.allMetaTable[i].tables[t].main_ref === selectedMetaUid) {
            this.getEditableTableInfoBySelectedMetaTable(this.allMetaTable[i].tables[t], selectedMetaUid)
          }
        }
      }
    },
    // 根据选中的元数据表的字段信息来获取可以拖动的栏位信息
    getColumnsInfoBySelectedMetaTableColumns (columns, metauid, metaname) {
      this.showMetaList = []
      if (columns.length) {
        columns.forEach((item, index) => {
          let objExam = null
          if (item.ui_type && Object.keys(this.metaUiComponents).indexOf(item.ui_type) !== -1) {
            objExam = JSON.parse(JSON.stringify(this.metaUiComponents[item.ui_type]))
            // 元数据表的名称
            objExam.metauid = metauid
            objExam.metaname = metaname
            // 元数据的字段名称
            objExam.model = item.column_name
            // 元数据的中文名称
            objExam.name = item.column_desc ? item.column_desc + ':' : item.column_name + ':'
            // 元数据表中的引用
            objExam.reference = item.reference === '{}' ? '' : item.reference
            // 是否必输
            objExam.options.required = !item.is_allow_empty
            // 默认值
            objExam.options.default_value = item.default_value
            // palceholder
            if (Object.keys(objExam.options).indexOf('placeholder') !== -1) {
              objExam.options.placeholder = objExam.options.placeholder + item.column_desc
            }
          } else {
            objExam = JSON.parse(JSON.stringify(this.metaUiComponents['Input']))
            // 元数据表的名称
            objExam.metauid = metauid
            objExam.metaname = metaname
            // 元数据的字段名称
            objExam.model = item.column_name
            // 元数据的中文名称
            objExam.name = item.column_desc ? item.column_desc + ':' : item.column_name + ':'
            // 元数据表中的引用
            objExam.reference = item.reference === '{}' ? '' : item.reference
            // 是否必输
            objExam.options.required = !item.is_allow_empty
            // 默认值
            objExam.options.default_value = item.default_value
            // palceholder
            if (Object.keys(objExam.options).indexOf('placeholder') !== -1) {
              objExam.options.placeholder = objExam.options.placeholder + item.column_desc
            }
          }
          this.$set(this.showMetaList, index, objExam)
        })
      }
    },
    getColumnsInfoBySelectedMetaTableColumnsOne (columns, metauid, metaname) {
      this.showVirMetaList = []
      if (columns.length) {
        columns.forEach((item, index) => {
          let objExam = null
          if (item.ui_type && Object.keys(this.metaUiComponents).indexOf(item.ui_type) !== -1) {
            objExam = JSON.parse(JSON.stringify(this.metaUiComponents[item.ui_type]))
            // 元数据表的名称
            objExam.metauid = metauid
            objExam.metaname = metaname
            // 元数据的字段名称
            objExam.model = item.column_name
            // 元数据的中文名称
            objExam.name = item.column_desc ? item.column_desc + ':' : item.column_name + ':'
            // 元数据表中的引用
            objExam.reference = item.reference === '{}' ? '' : item.reference
            // 是否必输
            objExam.options.required = !item.is_allow_empty
            // 默认值
            objExam.options.default_value = item.default_value
            // palceholder
            if (Object.keys(objExam.options).indexOf('placeholder') !== -1) {
              objExam.options.placeholder = objExam.options.placeholder + item.column_desc
            }
          } else {
            objExam = JSON.parse(JSON.stringify(this.metaUiComponents['Input']))
            // 元数据表的名称
            objExam.metauid = metauid
            objExam.metaname = metaname
            // 元数据的字段名称
            objExam.model = item.column_name
            // 元数据的中文名称
            objExam.name = item.column_desc ? item.column_desc + ':' : item.column_name + ':'
            // 元数据表中的引用
            objExam.reference = item.reference === '{}' ? '' : item.reference
            // 是否必输
            objExam.options.required = !item.is_allow_empty
            // 默认值
            objExam.options.default_value = item.default_value
            // palceholder
            if (Object.keys(objExam.options).indexOf('placeholder') !== -1) {
              objExam.options.placeholder = objExam.options.placeholder + item.column_desc
            }
          }
          this.$set(this.showVirMetaList, index, objExam)
        })
      }
    },
    // 根据选中的元数据表(main_ref)获取可以拖动的可编辑表格信息
    getEditableTableInfoBySelectedMetaTable (refTableInfo, selectedMetaUid) {
      let objExam = {
        type: 'editableTable',
        name: refTableInfo.metadesc,
        metauid: refTableInfo.metauid,
        metaname: refTableInfo.metaname,
        main_refTableUid: selectedMetaUid,
        model: 'editableTable_' + refTableInfo.metauid,
        icon: 'icon-zidingyi',
        tableData: [],
        tableColumns: [],
        options: {
          stripe: true,
          width: '100%',
          disabled: false,
          border: true,
          showLabel: true,
          isFilterDeleted: true, // 是否过滤掉逻辑删除的资料
          isHidden: false,
          // 隐藏表达式
          hiddenExpress: '',
          // 只读表达式
          disabledExpress: '',
          fixed_orderby_express: '' // 排序条件
        }
      }
      if (refTableInfo.columns.length) {
        refTableInfo.columns.forEach((item, index) => {
          let columnObj = {
            text: item.column_desc,
            indexName: item.column_name,
            isShow: true,
            sortNum: index + 1,
            isSwitch: item.ui_type === 'Switch',
            showText: item.reference && item.reference !== '{}' && (item.ui_type !== 'MapXY' && item.ui_type !== 'PicXY' && item.ui_type !== 'GIS_Draw_Line'),
            readonly: false,
            isFile: item.ui_type === 'File' || item.ui_type === 'Files' || item.ui_type === 'Picture' || item.ui_type === 'Pictures',
            ui_type: item.ui_type,
            selectOption: []
          }
          objExam.tableColumns.push(columnObj)
        })
      }
      this.showRelMetaTableList.push(objExam)
    }
  },
  watch: {
    'propsInfo.settingVisible': {
      handler: function (val, oldVal) {
        this.dialogObj.dialogFormVisible = val
        if (val) {
          this.dialogHadOpen()
        }
      },
      deep: true
    },
    // 选中的元素变化时
    selectFormItem: {
      handler: function (val, oldVal) {
        this.getAllSingleModel(this.formData.list)
      },
      deep: true
    }
  },
  components: {
    draggable, MetaFormLayout, MetaPageConfig, MetaPageInherentEventsConfig, MetaPageEventsConfig, MetaFormItemConfig, ShowMetaFormLayout, ShowWorkflowFormLayout, WorkflowConfig
  }
}
</script>
